<template>
  <!-- 人员基础信息 -->
  <base-breadcrumb>
    <searchData :searchData="searchArr" @search="search"></searchData>
    <a-card :bordered="false">
      <title-name :title="$route.meta.title"></title-name>
      <a-row type="flex" class="mb12">
        <a-button class="mr20" type="primary" icon="plus" @click="handleManage(2)">添加人员</a-button>
        <a-button  @click="handleDel">删除</a-button>
        <!-- <a-button class="mr20" type="primary" icon="import" @click="handleImport">批量导入</a-button>
        <a-button type="primary" icon="download" @click="handleManage(0, 0)">导入模板下载</a-button> -->
      </a-row>
      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        :alert="true"
        :pagination="false"
        show-size-changer
        show-quick-jumper
        :rowSelection="rowSelection"
        :showPagination="true"
      >
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleManage(0, record.id)">查看</a>
            <a-divider type="vertical" />
            <a @click="handleManage(1, record.id)">编辑</a>
          </template>
        </span>
      </s-table>
    </a-card>
    <!-- 表单弹窗 -->
    <dialog-form
      ref="dialogForm"
      :visible.sync="visible"
      editModel="E"
      :form="forms"
      headerTitle="人员信息批量导入"
      :width="1000"
      :formList="importForm"
      :rules="rules"
      @confirm="handleConfirm"
    >
      <!-- 附件上传 -->
      <template #fileArrays>
        <l-table businessCode="QM04" :uploadArrys.sync="forms.fileArrays"></l-table>
      </template>
    </dialog-form>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components'
import DialogForm from '@/components/DialogForm' // 表单弹窗
import { getPersonList,delPresons } from '@/api/project/projects'

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
     width: 80,
    customRender() {
      return arguments[2] + 1
    },
  },
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '性别',
    dataIndex: 'sexName',
  },
  {
    title: '电话号码',
    dataIndex: 'phone',
  },
  {
    title: '身份证号',
    dataIndex: 'idCard',
  },
  {
    title: '是否为特种作业人员',
    dataIndex: 'whetherSpecialTypeName',
  },
  {
    title: '证书名称',
    ellipsis: true,
    dataIndex: 'specialTypeName',
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '120px',
    fixed: 'right',
    scopedSlots: { customRender: 'action' },
  },
]

export default {
  name: 'personManage',
  components: {
    STable,
    DialogForm,
  },
  data() {
    this.columns = columns
    return {
      searchArr: [
        // 搜索框
        {
          name: '姓名',
          value: 'name',
          type: 'input',
        },
        {
          name: '身份证号码',
          value: 'idCard',
          type: 'input',
        },
        {
          name: '性别',
          value: 'sex',
          type: 'select',
          data: [
            {
              value: '0',
              label: '女',
            },
            {
              value: '1',
              label: '男',
            },
          ],
        },
        {
          name: '电话号码',
          value: 'phone',
          type: 'input',
        },
        {
          name: '是否为特种作业',
          value: 'whetherSpecialType',
          type: 'select',
          data: [
            {
              value: '1',
              label: '是',
            },
            {
              value: '0',
              label: '否',
            },
          ],
        },
        {
          name: '证书名称',
          value: 'specialTypeName',
          type: 'input',
        },
      ], // 搜索表单
      importForm: [
        {
          slot: true,
          keyName: 'fileArrays',
          label: '文件选择',
          span: 24,
        },
      ], // 导入表单列表
      forms: {}, // 弹窗表单
      visible: false, // 导入弹窗控件
      queryParam: {}, // 查询参数
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getPersonList(requestParameters).then((res) => {
          return res
        })
      },
      rules: {
        fileArrays: [{ type: 'array', required: true, message: '请上传文件', trigger: 'blur' }],
      }, // 弹窗表单校验
      selectedRowKeys: [],
      selectedRows: [],
      ids:[],
    }
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        selectedRows: this.selectedRows,   // 当前行所有数据
        onChange: this.onSelectChange
      }
    }
  },
  methods: {
    // 批量选中
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows

      let arr = []
      selectedRows.forEach(function(obj,i) {
        arr.push(obj.id)
      })
      this.ids = arr
    },
    handleDel(){
      let that = this
      if(that.selectedRows.length == 0){
        that.$message.warning('请先选择删除的删除人员！')
        return
      }
      that.$confirm({
        title: '温馨提示',
        content: '确定删除人员基础信息吗？',
        onOk() {
          delPresons({ids:that.ids}).then(res=>{
            if(res.data == 200 || res.data.code == 200){
              that.$message.success('删除成功！')
              that.$refs.table.refresh(true)
              that.selectedRows = []
              that.selectedRowKeys = []
            }
          })
        },
        onCancel() {},
      });

    },
    /**
     * 搜索
     */
    search(values) {
      if (values) this.queryParam = values
      this.$refs.table.refresh(true)
    },
    /**
     * 人员信息批量导入提交表单
     */
    handleConfirm() {},
    /**
     * 人员添加或编辑;type:0 查看，1 编辑，2 新增;id:业务id
     */
    handleManage(type, id) {
      this.$router.push({
        path: '/subcontractors/baseSetting/personManageEdit',
        query: {
          id: id,
          editModel: type,
        },
      })
    },
    /**
     * 人员信息批量导入
     */
    handleImport() {
      this.visible = true
    },
  },
}
</script>
